<template>
    <a-layout>
        <div>
            <a-layout-sider style="background-color: #FFF;" width="260" class="sider_layout_main">
                <div class="sider_layout_All_One">
                    MY PAGE
                <a-menu v-model:openKeys="openKeys" v-model:selectedKeys="current"  :defaultSelectedKeys="defaultSelectedKeys"
                      mode="vertical" :items="MeauList" @click="handleClick" :type="MeauList.type" :key="MeauList.path" />
                </div>
            </a-layout-sider>
            <a-layout-sider style="background-color: #FFF;height: 170px;flex:0 !important;" width="260"
                class="sider_layout_main">
                <div class="sider_layout_All">
                    <div class="sider_layout_All_text">FROFILE</div>
                    <div style="display: flex; flex-direction: row;align-items: center;">
                        <img id="myImage" />
                        <div class="sider_layout_All_Column">
                            <text
                                style="color: #000;font-size: 18px;font-weight: 500;line-height: normal;margin-bottom: 6px;">JamesSullivan
                                Reece</text>
                            <text
                                style="color: #000;font-size: 14px;font-weight: 500;line-height: normal;">james@inca.co.kr</text>
                        </div>
                    </div>
                </div>
            </a-layout-sider>
            <div style="background-color: #FFF;" class="sider_layout_main">
                <div
                    style="padding: 16px 99px; color: #777;text-align: center;font-family: Pretendard;font-size: 15px;font-style: normal;font-weight: 500;line-height: normal;">
                    로그아웃
                </div>
            </div>
        </div>

    </a-layout>
</template>


<script>
import $tools from '~/utils/tool.ts'
import MenuProps from 'ant-design-vue'

export default {
    data() {
        return {
            // 当前选中的菜单
            current: [],
            // 初始选中的菜单
            defaultSelectedKeys: ['/'],
            // 默认展开的二级菜单
            openKeys: ['user'],
            MeauList: [
                {
                    path: '/myPage/A',
                    type: 'user',
                    label: '구독현황',
                },
                {
                    path: '/myPage/B',
                    type: 'user',
                    label: '구독내역',
                },
                {
                    path: '/myPage/C',
                    type: 'user',
                    label: '상담내역'
                },
                {
                    path: '/myPage/A',
                    type: 'user',
                    label: '알림관리'
                },
                {
                    path: '/myPage/A',
                    type: 'user',
                    label: '계정관리'
                },
            ],

        }
    },
        mounted() {
            // 获取并设置当前菜单
            this.getMenuKey()
        },

        methods: {

            /**
             * 获取并设置当前菜单
             * @description 读取缓存并设置
             * @return void
             */
            getMenuKey() {
                // console.log(localStorage.getItem('router'))
                const router = localStorage.getItem('router')
                this.current = [router]
                this.defaultSelectedKeys = [router]
            },

            /**
             * 点击菜单每项
             * @description 设置缓存与跳转路由
             * @param {Object} e - 数据分析
             * @return void
             */
            handleClick(e) {
                console.log(e)
                // 修改菜单高亮
                this.current = []
                this.current.push(e.item.path)
                // 将路由写入缓存并跳转
                $tools.setRouter(e.item.path)
                // 避免路由相同跳转
                if (this.$route.path != e.item.path) {
                    this.$router.replace(e.item.path)
                }
            },
            handleClisk: MenuProps['onClick'] = menuInfo => {
                console.log('click ', menuInfo);
            },
                /**
                 * 点击标题分组
                 * @description 一级菜单
                 * @param {Object} e - 数据集
                 * @return void
                 */
                titleClick(e) {
                // console.log('titleClick', e);
            },
        }
    }

</script>

<style>
.sider_layout_main {

    border-radius: 15px;
    border: 1px solid #F0F0F0;
    margin-bottom: 24px;
}

.sider_layout_All_One {
    padding: 14.7px 0px 31px 18px;
}

.sider_layout_All {
    padding: 17px 0px 0px 16px;
}

.sider_layout_All_text {
    color: #000;
    font-family: Pretendard;
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    margin-bottom: 15px;
}

.sider_layout_All_Column {
    display: flex;
    flex-direction: column;
    margin-left: 11.86px;

}

.sider_layout_list {
    display: flex;
    flex-direction: row;
    padding: 31px 100px 0px 29px;
    align-items: center;
}

.icon_sider_layout {
    width: 35px;
    height: 35px;
    border-radius: 35px;
    background-color: #D9D9D9;

}

.layout_right {
    background-color: #fff;
    padding: 36px 34px;
    margin: 0;
    border-radius: 15px;
    border: 1px solid #F0F0F0;
}
</style>

